<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click.stop="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      会员礼品赠送
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text @click="fanhui" style="margin-left: 75rpx">会员礼品赠送</text>
      <!-- #endif -->
    </view>
    <view class="center">
      <view class="select">
        <view class="hycph"> 会员车牌号：{{ licensePlateNumber }} </view>
        <view class="chooseGift">
          <view class="chooseGift_top" @click="lpchage = !lpchage">
            <view class="" style="line-height: 42rpx">选择礼品</view>
            <image
              v-if="lpchage"
              class="image"
              src="https://pic.bangbangtongcheng.com/static/bbcz/arrow_bottom.png"
              mode=""
            ></image>
            <image
              v-else
              class="image"
              src="https://pic.bangbangtongcheng.com/static/bbcz/arrow_top.png"
              mode=""
            ></image>
          </view>

          <view class="chooseGift_bottom" v-if="!lpchage">
            <block v-for="(item, index) in giftInformationList" :key="index">
              <view
                class="chooseGift_bottom_item"
                :class="!item.giftInformation.batch ? 'square' : ''"
                v-if="!item.navTitle"
                :key="index"
              >
                <checkbox
                  class="checkboxs"
                  :checked="item.active"
                  :data-index="index"
                  @click="changeRadio($event, item)"
                >
                </checkbox>
                <view class="commodity">
                  <image
                    class="commodity_image"
                    :src="item.giftInformation.giftPicture"
                    mode="aspectFill"
                  ></image>
                  <!-- <image class="commodity_image" src="../static/bg.jpg" mode="aspectFill"></image> -->
                  <view class="">
                    {{ item.giftInformation.giftName }}
                  </view>
                </view>
              </view>
              <view
                class="new-chooseGift_bottom_item"
                v-if="item.navTitle"
                style="
                  padding: 20rpx 16rpx;
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #333333;
                  line-height: 39rpx;
                "
              >
                {{ item.navTitle }}
              </view>
            </block>
          </view>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="uploadPhotos">
        <view class="uploadPhotos_left">
          <view class="title" style="align-self: flex-start; margin-top: 32rpx">
            <span style="color: #e00000">*</span>
            上传现场照片
          </view>
          <view class="images">
            <imageUploadCropper
              class="image"
              :sourceType="['camera']"
              v-model="headerImage"
              :lengthNum="1"
              selWidth="600rpx"
              selHeight="400rpx"
              :ratio="1.5"
              @returnSuccess="obtainLicense"
            ></imageUploadCropper>
          </view>
        </view>

        <view class="uploadPhotos_right">
          <!-- <view class="title2" style="color: white;">
						示例图
					</view> -->
          <view class="uploadPhotos_right_img">
            <image
              class="image"
              src="https://pic.bangbangtongcheng.com/f45284482fdf481092c195f661d0770a"
              mode="aspectFill"
            ></image>
            <view class="title">示例图</view>
          </view>
        </view>
      </view>
    </view>
    <view class="" style="height: 140rpx"> </view>
    <view class="submit-wrap">
      <view class="submit" :class="allow ? '' : 'forbid'" @click="panduanCP"> 确认提交 </view>
    </view>

    <!-- 提交弹窗 -->
    <!-- <uni-popup ref="tijiaos" mode="center">
			<view class="tijiaos_frame">
				<view class="title">
					会员礼品赠送
				</view>
				<view class="tijiaos_one" v-if="assa==1">
					<image class="image" src="https://pic.bangbangtongcheng.com/static/bbcz/expression_02.png" mode="">
					</image>
					<view class="lqcg">领取成功</view>
					<view class="lqsj"><span style="color:#64B6A8;margin-right:20rpx;">领取时间</span>{{datetime}}</view>
					<view class="lqfs"><span style="color:#64B6A8;margin-right:20rpx;">领取方式</span> 到店领取</view>
				</view>
				<view class="tijiaos_one" v-if="assa==2">
					<image class="image" src="https://pic.bangbangtongcheng.com/static/bbcz/expression_01.png" mode="">
					</image>
					<view class="lqsb">领取失败</view>
					<view class="zhyc">账号异常，请提醒会员登录帮帮同城确认</view>
				</view>
				<view class="tijiaos_one" v-if="assa==3">
					<image class="image3" src="https://pic.bangbangtongcheng.com/icon/expression_04.png" mode="">
					</image>
					<view class="zhyc">本月已领取过礼品啦，敬请期待下月好礼~</view>
				</view>
				<view class="determine" @click="queding">
					确定
				</view>
			</view>
		</uni-popup> -->
    <uni-popup ref="tijiaos" type="center" :isMaskClick="false">
      <view class="uni-popup-wrapper" style="padding: 0 46rpx">
        <view class="uni-popup-title" style="line-height: 45rpx"> 会员礼品赠送 </view>
        <image
          :src="
            assa == 1
              ? 'https://pic.bangbangtongcheng.com/static/bbcz/expression_02.png'
              : assa == 2
              ? 'https://pic.bangbangtongcheng.com/static/bbcz/expression_01.png'
              : 'https://pic.bangbangtongcheng.com/icon/expression_04.png'
          "
          mode="widthFix"
          style="width: 78rpx; height: 78rpx; margin: 50rpx auto 0"
        ></image>
        <view
          class="uni-popup-tip"
          style="margin-top: 10rpx; margin-bottom: 16rpx; color: #3d3d3d; font-size: 26rpx"
          v-if="assa == 2"
        >
          账号异常
        </view>
        <view
          class="uni-popup-tip high"
          style="margin-top: 10rpx; margin-bottom: 22rpx; color: #3d3d3d; font-size: 26rpx"
          v-if="assa == 1"
        >
          领取成功
        </view>
        <view
          class="uni-popup-content"
          style="padding: 0rpx 0 30rpx 0; font-size: 28rpx; line-height: 39rpx"
        >
          <template v-if="assa == 1">
            <view class="lq" style="margin-bottom: 6rpx"
              ><span style="color: #64b6a8; margin-right: 20rpx">领取时间</span>{{ datetime }}</view
            >
            <view class="lq"
              ><span style="color: #64b6a8; margin-right: 20rpx">领取方式</span> 到店领取</view
            >
          </template>
          <template v-if="assa == 2">
            <view class="" style="white-space: nowrap"> 请提醒会员登录帮帮同城确认 </view>
          </template>
          <template v-if="assa == 3">
            <view class="" style="white-space: nowrap; margin-top: 40rpx">
              本月礼品已全部领取。敬请期待下月好礼
            </view>
          </template>
        </view>
        <button class="uni-popup-btn-one cu-btn" @click="fanhui">确定</button>
      </view>
    </uni-popup>
    <!-- 照片弹窗 -->
    <uni-popup ref="binds" mode="center">
      <view class="binds_frame">
        <view class="binds_frame_t">当前上传照片的车牌号与实际车牌号不符，请重新上传!</view>
        <view class="binds_frame_b" @click="jcbdCancel"> 确定 </view>
      </view>
    </uni-popup>
    <!-- #ifdef MP-WEIXIN -->
    <cropper ref="croop" v-show="showCroop" :quality="1" resize: false :canScale="true"
    selWidth="600rpx" selHeight="400rpx" style='z-index:1000' @upload="myUpload" class="userHeader"
    />
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN-->
    <gmy-img-cropper
      ref="gmyImgCropper"
      quality="1"
      cropperType="ratio"
      :ratio="1.5"
      fileType="png"
      imgSrc=""
      style="z-index: 1000"
      @getImg="myUpload"
    >
    </gmy-img-cropper>
    <!-- #endif -->
    <uniBall></uniBall>
  </view>
</template>

<script>
  import cCircle from '../../components/circle.vue'
  var count = 100000
  var numToSort = {}
  import permision from '@/js_sdk/wa-permission/permission.js'
  import imageUploadCropper from '@/components/imageUploadCropper.vue'
  import { mapGetters } from 'vuex'
  //#ifdef H5
  import wxshare from '../../utils/index.js'
  //#endif
  //#ifdef MP-WEIXIN
  import cropper from '../../components/lxiaoxiao-cropper/lxiaoxiao-cropper.vue'
  //#endif
  // #ifndef MP-WEIXIN
  import gmyImgCropper from '../../components/gmy-img-cropper/gmy-img-cropper.vue'
  //#endif
  export default {
    components: {
      // #ifndef MP-WEIXIN
      gmyImgCropper,
      //#endif
      //#ifdef MP-WEIXIN
      cropper,
      //#endif
      cCircle,
      imageUploadCropper,
    },
    data() {
      return {
        imgUrl: this.$imgSrc,
        userInfo: uni.getStorageSync('Pduser'),
        Recommend: [],
        lpchage: true,
        headerImage: [],
        assa: 1,
        licensePlateNumber: '',
        codeId: '',
        giftInformationList: [],
        lipingId: [],
        // 图片获取的车牌号
        licensePlate: '',
        datetime: '',
        // 小程序裁剪是否展示
        showCroop: false,
        allow: false,
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    onLoad(option) {
      console.log(option)
      this.licensePlateNumber = option.licensePlateNumber || ''
      // ||'陕K10001' 苏K56666 '苏FS7777' 京HL9999 "豫FY3333" 豫FY3333 京HL9999 沪KR9888 皖H88888 沪KR9888 苏F238TJ
      this.codeId = option.codeId || ''
      // ||'OjPlHxK2' ara0CkNS Iil2CLN3 25TmEb97 2KNdvk7j wjce3rV5
      this.giftsMerchants()
      /* #ifdef H5 */
      this.jinzhi()
      /* #endif */
    },
    methods: {
      // 获取商家发放礼品数据
      giftsMerchants() {
        let that = this
        this.$myRequest
          .get('/api/mobile/vehicleOwner/getDropDownListGiftInformation', {
            merchantId: this.userInfo.merchantId || '',
            licensePlateNumber: this.licensePlateNumber,
          })
          .then((res) => {
            // var showPrize = false
            // if(res.bindingTime&&res.bindingTime.bindingTime&&  +new Date()>+new Date(res.bindingTime.bindingTime)&&this.$Time.formatTime2('yyyy-MM',new Date())!=this.$Time.formatTime2('yyyy-MM',new Date(res.bindingTime.bindingTime))){
            // 	showPrize = true
            // }
            // bindingTime bindingTime : "2023-09-10 01:56:36"
            var pageList = res.giftInformation.pageList

            pageList.forEach((v) => {
              v.active = false
              v.batch = v.giftInformation.batch
              v.giftType = v.giftInformation.giftType
            })
            pageList = pageList.filter(
              (item) =>
                res.whetherBoundMerchantConsistent ||
                (!res.whetherBoundMerchantConsistent && item.giftInformation.giftType != '2')
            )
            // pageList = pageList.filter(item=>showPrize||!showPrize&&item.giftInformation.giftType!='2')

            // var newArr = []
            // res.giftInformation.pageList.map(item => {
            // 	item.batch = item.batch || 1
            // })
            // console.log('res.giftInformation',res.giftInformation.pageList)
            // res.giftInformation.pageList.map((item, index) => {
            // 	if (item.batch == 1 || item.batch != 1 && newArr.filter(item2 => item2.batch ==
            // 			item.batch).length) {
            // 		newArr.push(item)
            // 	} else {
            // 		newArr.push({
            // 			navTitle: this.multipleForOneText(item.batch) + '选一专区',
            // 			batch: item.batch,
            // 			whetherReceive: 0,
            // 			// id:count+index
            // 		})
            // 		newArr.push(item)
            // 	}
            // })
            // newArr.sort(function(a, b) {
            // 	return a.batch - b.batch
            // })

            var newArr = pageList
              .filter((item) => {
                return !item.giftInformation.batch
              })
              .map((item) => {
                return {
                  ...item,
                  sortIndex: { index: 0 },
                }
              })
            var tempArr1 = []
            var tempArr2 = pageList.filter((item) => {
              return item.giftInformation.batch
            })
            tempArr2
              .map((item) => {
                item.batch = item.giftInformation.batch || 1
              })
              .sort(function (a, b) {
                return a.batch - b.batch
              })

            tempArr2.map((item, index) => {
              let temp = tempArr1.filter(
                (item2) =>
                  item2.batch == item.batch && item2.giftType == item.giftType && item2.navTitle
              )
              if (temp.length > 0) {
                temp[0].num = temp[0].num + 1
                temp[0].navTitle = this.multipleForOneText(temp[0].num) + '选一专区'
                temp[0].sortIndex = numToSort[`type${item.giftType}batch${item.batch}`]
                item.sortIndex = numToSort[`type${item.giftType}batch${item.batch}`]
                numToSort[`type${item.giftType}batch${item.batch}`].index = temp[0].num
                tempArr1.push(item)
              } else {
                numToSort[`type${item.giftType}batch${item.batch}`] = { index: 1 }
                tempArr1.push({
                  navTitle: this.multipleForOneText(1) + '选一专区',
                  giftType: item.giftType,
                  batch: item.batch,
                  whetherReceive: 0,
                  id: count + index,
                  num: 1,
                  sortIndex: numToSort[`type${item.giftType}batch${item.batch}`],
                })
                item.sortIndex = numToSort[`type${item.giftType}batch${item.batch}`]
                tempArr1.push(item)
              }
            })
            this.giftInformationList = [...newArr, ...tempArr1]
            this.giftInformationList.sort(function (a, b) {
              return a.sortIndex.index - b.sortIndex.index
            })

            console.log(this.giftInformationList)

            // this.giftInformationList = newArr;
          })
      },
      // 判断上传图片是否和二维码车牌号一致
      panduanCP() {
        // if (this.headerImage.length == 0) {
        // 	uni.showToast({
        // 		title: "请上传图片",
        // 		icon: "none",
        // 		mask: true,
        // 	});
        // 	return false
        // }
        if (!this.allow) {
          return false
        }
        if (!this.licensePlate) {
          return false
        }
        if (this.licensePlate == this.licensePlateNumber) {
          this.Submit()
        } else {
          this.$refs.binds.open()
        }
      },
      // 提交礼品发放
      Submit() {
        // this.$refs.binds.open()
        // this.$refs.tijiaos.open()
        let giftId = this.giftInformationList
          .filter((item) => item.active)
          .map((item) => item.giftId)
          .join(',')
        console.log('giftId', giftId)
        // return
        // this.giftInformationList.forEach(v => {
        // 	if (v.active) {
        // 		giftId = v.giftId
        // 	}
        // })
        if (!giftId) {
          uni.showToast({
            title: '请选择礼品',
            icon: 'none',
            mask: true,
          })
          return false
        }
        if (this.submitLoading) {
          return false
        }
        this.submitLoading = true
        this.$myRequest
          .post('/api/mobile/vehicleOwner/giveMembershipGifts', {
            codeId: this.codeId,
            userId: this.userInfo.id,
            lssuedBy: this.userInfo.merchantStaffId
              ? this.userInfo.merchantStaffId
              : this.userInfo.merchantId,
            merchantId: this.userInfo.merchantId,
            roleType: this.userInfo.merchantStaffId ? '1' : '0',
            giftId: giftId,
            licensePlateNumber: this.licensePlateNumber,
            sitePhotos: this.headerImage[0],
          })
          .then(
            (res) => {
              if (res.code == 200 || res.code == 60015) {
                uni.hideToast()
                this.datetime = res.distributionTime
                this.assa = 1
                this.$refs.tijiaos.open()
              } else if (res.code == 60016) {
                uni.hideToast()
                this.assa = 2
                this.$refs.tijiaos.open()
              } else if (res.code == 60014) {
                uni.hideToast()
                this.assa = 3
                this.$refs.tijiaos.open()
              } else if (res.code == 60025 || res.code == 60027 || res.code == 60026) {
                uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  duration: 2500,
                })
                setTimeout(() => {
                  this.submitLoading = false
                }, 200)
              }
            },
            (err) => {
              if (err.code == 60022 || err.code == 20) {
                this.submitLoading = false
              }
            }
          )
      },
      // 上传图片获取车牌号
      obtainLicense() {
        if (this.headerImage.length == 0) {
          this.licensePlate = ''
          return
        }
        uni.showLoading({
          title: '图片识别中请稍后',
          mask: true,
        })
        this.$myRequest
          .post('/api/mobile/public/licensePlateRecognition', {
            photoUrl: this.headerImage[0],
          })
          .then((res) => {
            this.licensePlate = res.licensePlateRecognition.words_result.number
            this.allow = true
            setTimeout(function () {
              uni.hideLoading()
            }, 1000)
          })
          .catch((error) => {
            this.headerImage = []
            this.allow = false
          })
      },
      jcbdCancel() {
        this.$refs.binds.close()
      },
      queding() {
        this.$refs.tijiaos.close()
        if (this.assa == 1) {
          this.fanhui()
        }
      },
      changeRadio(e, item) {
        console.log(item)
        let index = ''
        index = e.currentTarget.dataset.index
        if (item.giftInformation.batch) {
          let status = this.giftInformationList[index].active
          this.giftInformationList
            .filter((item2) => item2.batch == item.batch)
            .forEach((v) => {
              v.active = false
            })
          this.giftInformationList[index].active = !status
          console.log(this.giftInformationList)
          return
        }
        this.giftInformationList[index].active = !this.giftInformationList[index].active
        console.log(this.giftInformationList)
        return
        if (this.giftInformationList[index].active) {
          this.giftInformationList[index].active = !this.giftInformationList[index].active
        } else {
          this.giftInformationList.forEach((v) => {
            v.active = false
          })
          this.giftInformationList[index].active = !this.giftInformationList[index].active
        }
      },
      multipleForOneText(num) {
        switch (num) {
          case 1:
            return '一'
            break
          case 2:
            return '二'
            break
          case 3:
            return '三'
            break
          case 4:
            return '四'
            break
          case 5:
            return '五'
            break
          case 6:
            return '六'
            break
          case 7:
            return '七'
            break
          case 8:
            return '八'
            break
          case 9:
            return '九'
            break
          case 10:
            return '十'
            break
        }
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        })
      },
      jinzhi() {
        let _this = this
        let param = window.location.href.split('#')[0]
        uni.request({
          method: 'post',
          data: {
            url: param,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded',
          },
          url: 'https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do',
          success(re) {
            _this.jinzhifx(re.data)
          },
        })
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ['hideMenuItems'],
        })
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            'menuItem:share:appMessage',
            'menuItem:share:timeline',
            'menuItem:share:timeline',
            'menuItem:share:qq',
            'menuItem:favorite',
            'menuItem:share:QZone',
            'menuItem:openWithSafari',
          ],
        })
      },
      async ChooseImages(menthType, type) {
        this.otherChooseImage()
      },
      otherChooseImage() {
        // #ifdef MP-WEIXIN
        this.showCroop = true
        this.$refs.croop.fSelect()
        //  #endif
        // #ifndef MP-WEIXIN
        this.$refs.gmyImgCropper.chooseImage(true)
        //  #endif
      },
      myUpload(rsp) {
        let filePath = ''
        // #ifndef MP-WEIXIN
        filePath = rsp
        // #endif
        // #ifdef MP-WEIXIN
        filePath = rsp.path
        this.showCroop = false
        //  #endif
        var _this = this
        this.headerImage = [
          {
            progress: 0,
            isShow: true,
            url: filePath,
          },
        ]
        var uper
        uni.showToast({
          title: '正在上传请稍后',
          icon: 'none',
          duration: 2000,
        })
        uper = uni.uploadFile({
          // 需要上传的地址
          url: 'https://www.bangbangtongcheng.com/conven/ht/attach/qnUpload',
          // filePath 需要上传的文件
          filePath: filePath,
          name: 'file',
          success(res1) {
            _this.headerImage[0].url = JSON.parse(res1.data).data[0].url
            setTimeout(() => {
              _this.headerImage[0].isShow = false
            }, 2000)
            _this.obtainLicense()
          },
        })
        // onProgressUpdate 上传对象更新的方法
        uper.onProgressUpdate(function (res) {
          _this.headerImage[0].progress = res.progress
        })
      },
      DelImgfm(e) {
        uni.showModal({
          title: '',
          content: '确定要删除图片？',
          cancelText: '取消',
          confirmText: '确定',
          success: (res) => {
            if (res.confirm) {
              this.headerImage.splice(e.currentTarget.dataset.index, 1)
              this.allow = false
            }
          },
        })
      },
      ViewImagefm(e) {
        uni.previewImage({
          urls: this.headerImage,
          current: e.currentTarget.dataset.url,
        })
      },
    },
  }
</script>

<style lang="less" scoped>
  page {
    background-color: #fff;
  }

  .box {
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
  }

  /deep/ uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
    border-color: #999;
  }

  /deep/uni-checkbox .uni-checkbox-input {
    background-color: rgba(0, 0, 0, 0);
    border: 2rpx solid #999;
  }

  /deep/uni-checkbox .wx-checkbox-input,
  /deep/uni-checkbox .uni-checkbox-input {
    width: 48rpx;
    height: 48rpx;
  }

  /deep/.uni-checkbox-input-checked {
    background-color: #64b6a8 !important;
    border: 2rpx solid #64b6a8 !important;
  }

  /deep/ uni-checkbox::before {
    font-size: 40rpx;
    margin-top: -14rpx;
    right: 6rpx !important;
  }

  .shangchuan-img {
    width: 200rpx !important;
    height: 200rpx !important;
    margin-bottom: 0 !important;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #69b6a8;
    /* #ifdef MP-WEIXIN */
    text-align: left;
    display: flex;
    align-items: center;
    /* #endif */

    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 28rpx;
      /* #ifdef MP-WEIXIN */
      position: initial;
      margin-left: auto;
      margin-right: 200rpx;
      /* #endif */
      bottom: 16rpx !important;
      right: 30rpx;
      // #ifdef APP
      // top: 50%;
      // #endif
    }
  }

  .center {
    padding: 0 40rpx;
    .select {
      box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
      padding: 30rpx;
      margin-top: 20rpx;
      border-radius: 24rpx;
    }
    .hycph {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }

    .chooseGift {
      width: 100%;
      margin-top: 30rpx;
      border-radius: 8rpx;
      border: 1px solid #f0f0f0;

      .chooseGift_top {
        height: 88rpx;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #333333;

        .image {
          width: 28rpx;
          height: 14rpx;
        }
      }

      .chooseGift_bottom {
        // margin:35rpx 0;
        padding: 0 24rpx;

        .chooseGift_bottom_item {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;

          .checkboxs {
            margin-right: 20rpx;
            &::before {
              transform: translateX(5px) scale(0.8);
            }

            ::v-deep {
              .wx-checkbox-input,
              .uni-checkbox-input {
                margin: 0;
                width: 16px;
                height: 16px;
              }
            }
          }

          ::v-deep uni-checkbox::before {
            font-size: 30rpx;
            margin-top: -8px;
            right: 2px !important;
          }

          .commodity {
            display: flex;
            font-size: 26rpx;
            font-weight: 400;
            color: #333333;

            .commodity_image {
              width: 98rpx;
              height: 98rpx;
              border-radius: 0rpx;
              margin-right: 20rpx;
            }
          }
        }

        .chooseGift_bottom_item:nth-child(1) {
          margin-top: 0;
        }
      }
    }

    .uploadPhotos {
      display: flex;
      // flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 40rpx;

      .uploadPhotos_left {
        display: flex;
        flex-direction: column;
        .title {
          margin-bottom: 20rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }
        .images {
          position: relative;
          width: 212rpx;
          height: 212rpx;
          ::v-deep .solids {
            width: 100%;
            height: 100%;
            margin: 0;
          }
          ::v-deep .grid.grid-square {
            height: 100%;
          }
          .colse {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #f0f0f0;
            border-radius: 0 8rpx 0 8rpx;
          }
        }
      }
      .uploadPhotos_right {
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: center;
        .uploadPhotos_right_img {
          position: relative;
          width: 200rpx;
          height: 200rpx;
          border-radius: 8rpx;
          overflow: hidden;

          .title {
            position: absolute;
            bottom: 0%;
            left: 0%;
            width: 200rpx;
            height: 48rpx;
            line-height: 48rpx;
            text-align: center;

            font-size: 30rpx;
            font-weight: 400;
            color: #ffffff;
            background: #666666;
            border-radius: 0 0 8rpx 8rpx;
          }
        }

        .title2 {
          margin-bottom: 20rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }

        .image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 8rpx;
          vertical-align: middle;
        }
      }
    }
  }

  .grid.col-4.grid-square > uni-view {
    width: 160rpx;
    height: 160rpx;
  }

  .cu-form-group {
    padding: 0;
  }
  .submit-wrap {
    position: fixed;
    left: 50%;
    bottom: 0;

    padding-bottom: 40rpx;
    left: 0%;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .submit {
    width: 560rpx;
    height: 88rpx;
    background-color: #64b6a8;
    border-radius: 44rpx;
    font-size: 34rpx;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    &.forbid {
      background-color: #c7c7c7;
    }
  }

  .tijiaos_frame {
    width: 600rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 46rpx;
    text-align: center;

    .title {
      font-size: 30rpx;
      font-weight: 550;
      color: #000000;
      margin-bottom: 28rpx;
    }

    .tijiaos_one {
      display: flex;
      flex-direction: column;
      // align-items: center;
      text-align: left;

      .image {
        width: 78rpx;
        height: 78rpx;
        margin: 0 auto;
        margin-bottom: 12rpx;
      }

      .image3 {
        width: 78rpx;
        height: 78rpx;
        margin: 0 auto;
        margin-bottom: 30rpx;
      }

      .lqcg {
        font-size: 26rpx;
        font-weight: 400;
        color: #64b6a8;
        text-align: center;
        margin-bottom: 22rpx;
      }

      .lqsb {
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        text-align: center;
        margin-bottom: 22rpx;
      }

      .zhyc {
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        text-align: center;
      }

      .lqsj {
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        margin-left: 72rpx;
      }

      .lqfs {
        font-size: 26rpx;
        font-weight: 400;
        color: #333333;
        margin-left: 72rpx;
      }
    }

    .determine {
      width: 480rpx;
      height: 70rpx;
      background-color: #64b6a8;
      border-radius: 10rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      margin-top: 30rpx;
    }
  }

  .binds_frame {
    width: 600rpx;
    height: 286rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    text-align: center;
    position: relative;

    .binds_frame_t {
      font-size: 30rpx;
      font-weight: 550;
      color: #000000;
      padding: 0 46rpx;
      padding-top: 36rpx;
    }

    .binds_frame_b {
      width: 480rpx;
      height: 70rpx;
      margin: 0 auto;
      margin-top: 30rpx;
      background-color: #64b6a8;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .uni-popup-wrapper {
    width: 600rpx;
    background: #ffffff;
    border-radius: 10rpx;
    opacity: 1;
    padding: 0 32rpx;
    text-align: center;
    overflow: hidden;
  }

  .uni-popup-title {
    margin-top: 32rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    line-height: 30rpx;
  }

  .uni-popup-content {
    padding: 30rpx 32rpx 40rpx 32rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
    line-height: 42rpx;
    .lq {
      text-align: left;
      padding: 0 40rpx;
    }
  }

  .uni-popup-btn-one {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background: #64b6a8;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;
    font-size: 30rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 30rpx;
    margin-bottom: 32rpx;
  }

  .uni-popup-mark {
    color: #e00000;
  }

  .uni-popup-tip {
    font-size: 20rpx;
    font-weight: 400;
    color: #999999;
    line-height: 28rpx;
    margin: 10rpx auto;

    &.high {
      color: #64b6a8;
    }
  }

  .uni-popup-btn-wrapper {
    display: flex;
    width: 100%;
  }

  .uni-popup-btn {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 30rpx;
    font-weight: 400;
    opacity: 1;
    border-radius: 0;

    &.left {
      background: #f2f2f2;
      color: #333333;
    }

    &.right {
      background: #64b6a8;
      color: #ffffff;
    }
  }

  .uni-popup-list {
    margin: 0 22rpx 32rpx 22rpx;

    .uni-popup-item {
      margin-top: 20rpx;

      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      line-height: 39rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
</style>
